<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>


    <!-- All Vendor & plugins CSS include -->
    <link href="css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        form {
            margin-left: 470px;
            padding: 0;
            text-align: center;
        }
        a {
            text-decoration: none;
            color: white;
        }
        a:hover{
            text-decoration:none;
             color:white;
        }
    </style>


</head>
<body>
<!-- Start Header Area -->
<header class="header-area">
    <!-- main header start -->
    <div class="main-header d-none d-lg-block">
        <!-- header top start -->
        <div class="header-top bdr-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="welcome-message">
                            <p>欢迎光临花语在线订花系统</p>
                        </div>
                    </div>
                    <div class="col-lg-6 text-right">
                        <div class="header-top-settings">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- header middle area start -->
        <div class="header-main-area sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- start logo area -->
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <h2> HUA YU </h2>
                            </a>
                        </div>
                    </div>
                    <!-- start logo area -->

                    <!-- main menu area start -->
                    <div class="col-lg-6 position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- main menu navbar start -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li><a href="index.html">主页</a></li>
                                        <li><a href="store.html">查看商家</a></li>
                                        <li><a href="shopping.html">查看购物车</a></li>
                                    </ul>
                                </nav>
                                <!-- main menu navbar end -->
                            </div>
                        </div>
                    </div>
                    <!-- main menu area end -->

                    <!-- mini cart area start -->
                    <div class="col-lg-3">
                        <div class="header-configure-wrapper">
                            <div class="header-configure-area">
                                <ul class="nav justify-content-end">
                                    <li class="user-hover">
                                        <a href="#" title="个人中心">
                                    <li><img src="{{result.store.simg}}" style="width: 60px" height="60px"></li>
                                    </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h4>退出</h4>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- mini cart area end -->

                </div>
            </div>
        </div>
        <!-- header middle area end -->
    </div>
    <!-- main header start -->
</header>
<!-- end Header Area -->

<!-- main wrapper start -->
<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area common-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h1>商家</h1>
                            <br>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->
</main>
<div class="container" id="container">
    <form class="form-inline" role="form">
        <input type="hidden" id="sid" v-model="result.store.sid">
        <div class="form-group">
            <label for="sname">店铺名称:</label>
            <input type="text" class="form-control" id="sname" name="sname" v-model="result.store.sname" disabled>
            <br/><br/><br/>
            <label for="phone">联系方式:</label>
            <input type="text" class="form-control" id="phone" name="sname" v-model="result.store.phone" disabled>
            <br/><br/><br/>
            <label for="saddress">店铺地址:</label>
            <input type="text" class="form-control" id="saddress" name="saddress" v-model="result.store.saddress"
                   disabled>
            <br/><br/><br/>
            <label for="hiredate">注册日期:</label>
            <input type="text" class="form-control" id="hiredate" name="hiredate" v-model="result.store.hiredate"
                   disabled>
            <br/><br/><br/>
            <label for="state">店铺状态:</label>
            <!--            <input type="text" class="form-control" id="state" name="state"-->
            <!--                   v-bind:value="result.data.state==0?'正常营业':'暂停营业'" disabled>-->
            <!--            -->
            <select id="state" name="state" v-model="result.store.state" disabled>
                <option value="0">正常营业</option>
                <option value="1">暂不营业</option>
            </select>
            <br/><br/><br/>
            <input type="button" id="btn_edit" class="btn btn-info" v-on:click="edit_btn()" value="修改店铺信息">
            <input type="hidden" id="btn_save" class="btn btn-info" @click="edit_save()" value="保存修改">
            <button type="button" class="btn btn-info"><a href="store_editPs.html">修改密码</a></button>
        </div>
    </form>
</div>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/global.js"></script>
<script>
    var app = new Vue({
        el: '#container',
        data: {
            sid: 1,
            result: {
                store: {}
            }
        },
        methods: {
            query_store: function () {
                axios.get(base_url + 'store/query_Store.do/' + this.sid).then(function (res) {
                    app.result.store = res.data.data;
                })
            },
            edit_btn: function () {
                $('#sname').attr("disabled", false);
                $('#phone').attr("disabled", false);
                $('#saddress').attr("disabled", false);
                $('#hiredate').attr("disabled", false);
                $('#state').attr("disabled",false);
                $('#btn_edit').attr("type", 'hidden');
                $('#btn_save').attr("type", 'button');
                // $.post("update_store.do", {
                //     sname: $('#sname').val(),
                //     phone: $('#phone').val(),
                //     saddress: $('#saddress').val(),
                //     hiredate: $('#hiredate').val()
                // }, function (data) {
                //       console.log(data);
                //         // $('#sname').val()=
                //         // $('#phone').val()=
                //         // $('#saddress').val()=
                //         // $('#hiredate').val()=
                // }, 'json')
            },
            edit_save: function () {
                axios.post(base_url + 'store/update_store.do', this.result.store).then(function (res) {
                    app.query_store();
                    // console.log(res);
                    $('#sname').attr("disabled", true);
                    $('#phone').attr("disabled", true);
                    $('#saddress').attr("disabled", true);
                    $('#hiredate').attr("disabled", true);
                    $('#state').attr("disabled",true);
                    $('#btn_save').attr("type", 'hidden');
                    $('#btn_edit').attr("type", 'button');
                })
            }
        },
        mounted: function () {
            this.query_store();
        }
    })
</script>
</html>